<!DOCTYPE html>
<html lang="en">
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>number input knob</title>
  <link rel="stylesheet" href="./style.css" type="text/css" />
  <body>
    <div class="wrapper">
      <form class="knob-group" lang="en" novalidate spellcheck="false">
        <legend data-key="space / return">Knob Group</legend>
        <hr />
        <fieldset class="knob">
          <input
            type="number"
            id="k"
            value="2.5"
            min="0"
            max="12"
            step="0.1"
            placeholder="-"
            autocomplete="off"
            required
          />
          <label for="k" accesskey="k" data-unit="db">K Knob</label>
        </fieldset>
        <fieldset class="knob">
          <input
            type="number"
            id="l"
            value="6"
            min="0"
            max="12"
            step="0.1"
            placeholder="-"
            autocomplete="off"
            required
          />
          <label for="l" accesskey="l" data-unit="Amp">L Knob</label>
        </fieldset>
        <fieldset class="knob">
          <input
            type="number"
            id="m"
            value="0"
            min="0"
            max="100"
            step="1"
            placeholder="-"
            autocomplete="off"
            required
          />
          <label for="m" accesskey="m" data-unit="cm">M Knob</label>
        </fieldset>
      </form>

      <form class="knob-group" lang="en" novalidate spellcheck="false">
        <legend data-key="space / return">Knobs Balance</legend>
        <hr />
        <fieldset class="knob knob-balance">
          <input
            type="number"
            id="o"
            value="-5"
            min="-12"
            max="12"
            step="0.1"
            placeholder="-"
            autocomplete="off"
            required
          />
          <label for="o" accesskey="o">O Knob</label>
          <i data-min="-12" data-max="12" aria-hidden="true"></i>
        </fieldset>
        <fieldset class="knob knob-balance">
          <input
            type="number"
            id="p"
            value="5"
            min="-12"
            max="12"
            step="0.1"
            placeholder="-"
            autocomplete="off"
            required
          />
          <label for="p" accesskey="p">P Knob</label>
          <i data-min="-12" data-max="12" aria-hidden="true"></i>
        </fieldset>
        <fieldset class="knob knob-balance">
          <input
            type="number"
            id="q"
            value="0"
            min="-12"
            max="12"
            step="0.1"
            placeholder="-"
            autocomplete="off"
            required
          />
          <label for="q" accesskey="q">Q Knob</label>
          <i data-min="-12" data-max="12" aria-hidden="true"></i>
        </fieldset>
      </form>

      <form class="knob-group" lang="en" novalidate spellcheck="false">
        <legend data-key="space / return">Small Knobs</legend>
        <hr />
        <fieldset class="knob knob-small">
          <input
            type="number"
            id="r"
            value="8"
            min="0"
            max="12"
            step="0.2"
            placeholder="-"
            autocomplete="off"
            required
          />
          <label for="r" accesskey="r" data-unit="db">R Knob</label>
        </fieldset>
        <fieldset class="knob knob-small">
          <input
            type="number"
            id="s"
            value="4"
            min="0"
            max="12"
            step="0.2"
            placeholder="-"
            autocomplete="off"
            required
          />
          <label for="s" accesskey="s" data-unit="cm">S Knob</label>
        </fieldset>
        <fieldset class="knob knob-small">
          <input
            type="number"
            id="t"
            value="0"
            min="-10"
            max="10"
            step="0.2"
            placeholder="-"
            autocomplete="off"
            required
          />
          <label for="t" accesskey="t">T Knob</label>
          <i data-min="-10" data-max="10" aria-hidden="true"></i>
        </fieldset>
        <fieldset class="knob knob-small">
          <input
            type="number"
            id="u"
            value="0"
            min="-10"
            max="10"
            step="0.2"
            placeholder="-"
            autocomplete="off"
            required
          />
          <label for="u" accesskey="u">U Knob</label>
          <i data-min="-10" data-max="10" aria-hidden="true"></i>
        </fieldset>
      </form>
    </div>
    <script src="./script.js" type="text/javascript"></script>
  </body>
</html>
